<template>
  <div class="content">
    <div id="cloud">
      <div class="cloud-timeLine">
        <div class="cloud-timeLine-content">
          <el-timeline>
            <el-timeline-item placement="top" v-for="(_case, index) in caseList"
                              :key="index">
              <el-card>
                <div @click="toCase(_case.id)" class="cloud-timeLine-content-box">
                  <div class="cloud-timeLine-content-header">
                    <p>病例编号：<b>{{ _case.id }}</b></p>
                  </div>
                  <div class="cloud-timeLine-content-detail">
                    <h4>{{ _case.main }}</h4>
                  </div>
                  <div class="cloud-timeLine-content-time">
                    <p>{{ _case.time }}</p>
                  </div>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <div class="cloud-wordCloud">
        <div ref='pieChart' class="cloud-wordCloud-chart"></div>
        <img :src="cloudSrc" class="cloud-wordCloud-img">
      </div>
    </div>
    <div class="cloud-none">
      <div id="similar-empty" v-on:click="emptyJump">
        <el-empty description="请选择疾病"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'CaseWordCloud',
  data () {
    return {
      cloudSrc: '',
      caseList: [],
      pieList: []
    }
  },
  mounted () {
    if (Vue.prototype.GLOBAL.tgDisId !== '') {
      this.getInfo()
      let empty = document.getElementById('similar-empty')
      let cloud = document.getElementById('cloud')
      empty.style.display = 'none'
      cloud.style.display = 'flex'
    } else {
      let empty = document.getElementById('similar-empty')
      let cloud = document.getElementById('cloud')
      empty.style.display = 'block'
      cloud.style.display = 'none'
    }
  },
  methods: {
    getInfo () {
      var _this = this
      this.$axios
        .get('/diseaseStatistics', {
          params: {
            diseaseId: Vue.prototype.GLOBAL.tgDisId
          }
        })
        .then(successResponse => {
          if (successResponse.data.code === 200) {
            console.log(successResponse.data.data)
            _this.cloudSrc = 'data:image/png;base64,' + successResponse.data.data[1]
            _this.caseList = successResponse.data.data[0]
            for (let i = 0, length = successResponse.data.data[2][0].length; i < length; i++) {
              let pieItem = {
                value: successResponse.data.data[2][0][i],
                name: successResponse.data.data[2][1][i]
              }
              _this.pieList.push(pieItem)
            }
            _this.getPieChart()
            // console.log(_this.cloudSrc)
            // console.log(_this.caseList)
          }
        })
        .catch(failResponsse => {
          console.log(failResponsse)
        })
    },
    getPieChart () {
      var _this = this
      const chart = this.$refs.pieChart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          title: {
            text: '病历数据各症状占比',
            subtext: '患者数据同居',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: _this.pieList,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
        this.$on('hook:destroyed', () => {
          window.removeEventListener('resize', function () {
            myChart.resize()
          })
        })
      }
    },
    emptyJump () {
      this.$router.push('/case/info')
    },
    toCase (index) {
      Vue.prototype.GLOBAL.tgCaseId = index
      this.$router.push('/case/patientImg')
    }
  }
}
</script>

<style scoped>
.cloud-timeLine {
  margin-top: 50px;
  width: 40%;
  min-height: 800px;
  display: flex;
  justify-content: center;
  /*align-items: center;*/
}

.cloud-wordCloud {
  width: 60%;
  min-height: 800px;
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  align-items: center;
}

.cloud-wordCloud-chart {
  width: 80%;
  min-height: 300px;
  margin-top: 50px;
}

.cloud-timeLine-content {
  width: 80%;
}

.cloud-wordCloud-img {
  width: 60%;
}

.cloud-timeLine-content-header {
  width: 100%;
  display: flex;
  justify-content: start;
}

.cloud-timeLine-content-detail {
  font-size: 20px;
}

.cloud-timeLine-content-time {
  font-size: 12px;
  width: 100%;
  display: flex;
  justify-content: right;
}

#cloud {
  display: flex;
}

#similar-empty {
  cursor: pointer;
}

.cloud-timeLine-content-box {
  cursor: pointer;
}
</style>
